<template>
  <view class="login-container">
    <!-- 登录表单容器 -->
    <view class="login-form">
      <!-- Logo -->
      <view class="logo-container">
        <image src="/static/logo.png" class="logo" mode="aspectFit"></image>
        <text class="app-name">小摸摸</text>
      </view>
      
      <!-- 表单 -->
      <view class="form-group">
        <view class="input-item">
          <image src="/static/icons/user.svg" class="input-icon" mode="aspectFit"></image>
          <input type="text" v-model="username" placeholder="请输入用户名" placeholder-style="color: #999" />
        </view>
        
        <view class="input-item">
          <image src="/static/icons/lock.svg" class="input-icon" mode="aspectFit"></image>
          <input type="password" v-model="password" placeholder="请输入密码" placeholder-style="color: #999" />
        </view>
        
        <button class="login-button" @click="handleLogin" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
        
        <view class="login-options">
          <text class="register-link" @click="navigateToRegister">注册账号</text>
          <text class="forgot-password" @click="handleForgotPassword">忘记密码?</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { login } from '@/utils/api'
import { setToken } from '@/utils/auth'

export default {
  data() {
    return {
      username: '',
      password: '',
      loading: false,
      error: ''
    }
  },
  onLoad() {
    // 检查是否已经登录
    const token = uni.getStorageSync('token')
    if (token) {
      uni.switchTab({
        url: '/pages/app/app'
      })
    }
  },
  methods: {
    async handleLogin() {
      // 表单验证
      if (!this.username || !this.password) {
        this.error = '请输入用户名和密码'
        this.showToast(this.error)
        return
      }
      
      this.loading = true
      try {
        const res = await login({
          username: this.username,
          password: this.password
        })
        console.log("loginRes", res)
        
        // 保存token
        setToken(res.token)
        
        // 保存用户信息
        uni.setStorageSync('userInfo', res.user)
        
        // 登录成功后跳转首页
        this.showToast('登录成功', 'success')
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/app/app'
          })
        }, 1500)
      } catch (err) {
        this.error = err.message || '登录失败，请重试'
        this.showToast(this.error, 'none')
        console.error('登录失败:', err)
      } finally {
        this.loading = false
      }
    },
    
    navigateToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
    
    handleForgotPassword() {
      // 忘记密码功能暂未实现
      this.showToast('找回密码功能即将上线', 'none')
    },
    
    showToast(title, icon = 'none') {
      uni.showToast({
        title,
        icon,
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
}

.login-form {
  width: 100%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
}

.app-name {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

.form-group {
  width: 100%;
}

.input-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  margin-bottom: 30rpx;
  background: #f8f8f8;
  border-radius: 10rpx;
  transition: all 0.3s ease;
}

.input-item:focus-within {
  background: #fff;
  border: 1rpx solid #667eea;
  box-shadow: 0 0 0 5rpx rgba(102, 126, 234, 0.1);
}

.input-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

input {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  background: transparent;
}

.login-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 45rpx;
  margin: 40rpx 0 30rpx;
  border: none;
  transition: all 0.3s ease;
}

.login-button:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.login-button:disabled {
  opacity: 0.7;
}

.login-options {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
}

.register-link,
.forgot-password {
  font-size: 28rpx;
  color: #667eea;
}
</style>